<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
		/>
		<link rel="icon" href="<%= BASE_URL %>favicon.svg" />
		<title><%= webpackConfig.name %></title>
		<style>
			#loading {
				background: radial-gradient(#c5c9e4, transparent);
				height: 100%;
				width: 100%;
				position: fixed;
				z-index: 1;
				margin-top: 0;
				top: 0;
			}
			#loading-center {
				width: 100%;
				height: 100%;
				position: relative;
			}
			#loading-center-absolute {
				position: absolute;
				left: 50%;
				top: 50%;
				height: 200px;
				width: 200px;
				margin-top: -100px;
				margin-left: -100px;
			}
			.object {
				width: 50px;
				height: 50px;
				background-color: rgba(255, 255, 255, 0);
				margin-right: auto;
				margin-left: auto;
				border: 4px solid #007bf9;
				left: 73px;
				top: 73px;
				position: absolute;
			}
			.first_object {
				-webkit-animation: first_object_animate 1s infinite ease-in-out;
				animation: first_object_animate 1s infinite ease-in-out;
			}
			.second_object {
				-webkit-animation: second_object 1s forwards,
					second_object_animate 1s infinite ease-in-out;
				animation: second_object 1s forwards,
					second_object_animate 1s infinite ease-in-out;
			}
			.third_object {
				-webkit-animation: third_object 1s forwards,
					third_object_animate 1s infinite ease-in-out;
				animation: third_object 1s forwards,
					third_object_animate 1s infinite ease-in-out;
			}
			@-webkit-keyframes second_object {
				100% {
					width: 100px;
					height: 100px;
					left: 48px;
					top: 48px;
				}
			}
			@keyframes second_object {
				100% {
					width: 100px;
					height: 100px;
					left: 48px;
					top: 48px;
				}
			}
			@-webkit-keyframes third_object {
				100% {
					width: 150px;
					height: 150px;
					left: 23px;
					top: 23px;
				}
			}
			@keyframes third_object {
				100% {
					width: 150px;
					height: 150px;
					left: 23px;
					top: 23px;
				}
			}
			@-webkit-keyframes first_object_animate {
				0% {
					-webkit-transform: perspective(100px);
				}
				50% {
					-webkit-transform: perspective(100px) rotateY(-180deg);
				}
				100% {
					-webkit-transform: perspective(100px) rotateY(-180deg)
						rotateX(-180deg);
				}
			}
			@keyframes first_object_animate {
				0% {
					transform: perspective(100px) rotateX(0deg) rotateY(0deg);
					-webkit-transform: perspective(100px) rotateX(0deg)
						rotateY(0deg);
				}
				50% {
					transform: perspective(100px) rotateX(-180deg) rotateY(0deg);
					-webkit-transform: perspective(100px) rotateX(-180deg)
						rotateY(0deg);
				}
				100% {
					transform: perspective(100px) rotateX(-180deg)
						rotateY(-180deg);
					-webkit-transform: perspective(100px) rotateX(-180deg)
						rotateY(-180deg);
				}
			}
			@-webkit-keyframes second_object_animate {
				0% {
					-webkit-transform: perspective(200px);
				}
				50% {
					-webkit-transform: perspective(200px) rotateY(180deg);
				}
				100% {
					-webkit-transform: perspective(200px) rotateY(180deg)
						rotateX(180deg);
				}
			}
			@keyframes second_object_animate {
				0% {
					transform: perspective(200px) rotateX(0deg) rotateY(0deg);
					-webkit-transform: perspective(200px) rotateX(0deg)
						rotateY(0deg);
				}
				50% {
					transform: perspective(200px) rotateX(180deg) rotateY(0deg);
					-webkit-transform: perspective(200px) rotateX(180deg)
						rotateY(0deg);
				}
				100% {
					transform: perspective(200px) rotateX(180deg)
						rotateY(180deg);
					-webkit-transform: perspective(200px) rotateX(180deg)
						rotateY(180deg);
				}
			}
			@-webkit-keyframes third_object_animate {
				0% {
					-webkit-transform: perspective(300px);
				}
				50% {
					-webkit-transform: perspective(300px) rotateY(-180deg);
				}
				100% {
					-webkit-transform: perspective(300px) rotateY(-180deg)
						rotateX(-180deg);
				}
			}

			@keyframes third_object_animate {
				0% {
					transform: perspective(300px) rotateX(0deg) rotateY(0deg);
					-webkit-transform: perspective(300px) rotateX(0deg)
						rotateY(0deg);
				}
				50% {
					transform: perspective(300px) rotateX(-180deg) rotateY(0deg);
					-webkit-transform: perspective(300px) rotateX(-180deg)
						rotateY(0deg);
				}
				100% {
					transform: perspective(300px) rotateX(-180deg)
						rotateY(-180deg);
					-webkit-transform: perspective(300px) rotateX(-180deg)
						rotateY(-180deg);
				}
			}
			.load_title {
				font-family: 'Open Sans';
				color: #007bf9;
				font-size: 19px;
				width: 100%;
				text-align: center;
				z-index: 999;
				position: absolute;
				top: 65%;
				opacity: 1;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="loading">
				<div id="loading-center">
					<div id="loading-center-absolute">
						<div class="object first_object"></div>
						<div class="object second_object"></div>
						<div class="object third_object"></div>
					</div>
				</div>
				<div class="load_title">
					正在加载中控后台,请耐心等待
				</div>
			</div>
		</div>
	</body>
</html>
